// 柱状图封装
// 把可变的部分抽象成prop参数
import * as echarts from 'echarts';
import { useEffect } from 'react';
import { useRef } from 'react';
const BarChart = ({ title }) => {
    const chartRef = useRef(null);
    useEffect(() => {
      const chartDom = chartRef.current
      const myChart = echarts.init(chartDom); // 图标初始化
      const option = { // 图标参数
        title:{
          text:title
        },
        xAxis: {
          type: 'category',
          data: ['Vue', 'React', 'Angular']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [10, 40, 70],
            type: 'bar'
          }
        ]
      };
      option && myChart.setOption(option); // 参数存在则完成图标渲染
    },[])
    
    return <div ref={chartRef} style={{ width: '400px', height: '300px' }}></div>
}

export default BarChart